<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <!--<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no"/>-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="description" content="web description is me">
    <meta name="author" content="wangqinmin">
    <link rel="icon" href="../img/icon/B.ico">
    <title>bootstrap表单样式 基础、内联、横向</title>
    <link rel="stylesheet" href="../bootstrap-3.3.7/css/bootstrap.css"/>
    <link rel="stylesheet" href="../bootstrap-3.3.7/css/bootstrap-theme.css"/>
    <link href="../css/ie10-viewport-bug-workaround.css" rel="stylesheet">
    <link href="../css/starter-template.css" rel="stylesheet">
    <script type="text/javascript" src="../jquery-3.3.1/jquery-3.3.1.js"></script>
    <script type="text/javascript" src="../bootstrap-3.3.7/js/bootstrap.js"></script>

</head>
<!-- 表单样式 ， 表单基础，内联表单，横向表单-->
<body>
<!-- container：作用相当于一个自动居中的容器(用的地方很多，不然样式可能难看) -->
<!-- 表单样式 -->
<!--  style="border:1px #2b669a solid" -->
<div class="container">
    <form action="#" method="post">
        <!-- form-group 设置与下面的div之间的像素为15个像素 -->
        <div class="form-group">
            <label>用户名：</label>
            <!-- form-control 将输入框(文本框)的宽度设置成了100% -->
            <input type="text" class="form-control" name="name" placeholder="输入用户名、手机号"/>
        </div>
        <div class="form-group">
            <!--如果需要在表单中将一行纯文本和 label 元素放置于同一行，为元素添加 .form-control-static 类即可<br/>-->
            <!--<h2>静态控件：</h2><br/>-->
            <!-- form-control 将输入框(文本框)的宽度设置成了100% -->
            <label class="control-label col-sm-2">曾经使用电话号码：</label>
            <div class="col-sm-10">
            <p class="form-control-static">13888888888</p>
            </div>
        </div>
        <!-- form-group 设置与下面的div之间的像素为15个像素 -->
        <div class="form-group">
            <label>下拉框：</label>
            <!-- multiple ：可以多选，html5的新特性 -->
            <!--<select name="ss" class="form-control" multiple>-->
            <select name="ss" class="form-control">
                <option value="1">中国1区</option>
                <option value="2">中国2区</option>
                <option value="3">中国3区</option>
                <option value="4">中国4区</option>
            </select>
        </div>
        text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color
        <br/>
        年月日：<input type="date" value=""><br/>
        年月日时分：<input type="datetime-local" value=""><br/>
        月：<input type="month" value=""><br/>
        时分：<input type="time" value=""><br/>
        周：<input type="week" value=""><br/>
        只能填数字：<input type="number" value=""><br/>
        只能输入网址：<input type="url" value="" placeholder="例如：http://www.baidu.com"><br/>
        搜索框：<input type="search" value=""><br/>
        手机号：<input type="tel" value=""><br/>
        颜色：<input type="color" value=""><br/>
        建议：
        <textarea class="form-control" rows="3" placeholder="请输入您的建议或意见"></textarea>
        <!-- form-group 设置与下面的div之间的像素为15个像素 -->
        <div class="radio">
            <!-- bootstrap使用单选框的标准,用label标签包装 -->
            <label class="radio-inline"><input type="radio" value="1" name="sex"/>男</label>
            <label><input type="radio" value="2" name="sex"/>女</label>
        </div>
        <hr/>
        <div class="radio">
            <!-- bootstrap使用单选框的标准 -->
            <label><input type="radio" value="1" name="sex"/>男</label>
        </div>

        <div class="radio">
            <!-- bootstrap使用单选框的标准 -->
            <label><input type="radio" value="2" name="sex"/>女</label>
        </div>
        <hr/>

        <div class="checkbox">
            <!-- -->
            checkbox-inline<br/>
            <!-- bootstrap使用复选框的标准 -->
            <label class="checkbox-inline"><input type="checkbox"/>记住密码</label>
            <label class="checkbox-inline"><input type="checkbox"/>自动登录</label>
        </div>
        <div class="checkbox">
            <!-- -->
            <!-- bootstrap使用复选框的标准 -->
            <label><input type="checkbox"/>记住密码</label>
            <label><input type="checkbox"/>自动登录</label>
        </div>
        <div class="form-group">
            <label for="exampleInputEmail1">电子邮件</label>
            <input type="email" class="form-control" id="exampleInputEmail1" placeholder="例如：examp@examp.com">
        </div>
        <div class="form-group">
            <label>密码：</label>
            <input type="password" class="form-control" name="pwd" placeholder="输入密码">
        </div>
        <div class="form-group">
            <label for="exampleInputFile">图片上传</label>
            <input type="file" id="exampleInputFile">
            <p class="help-block">上传高清身份证正面</p>
        </div>

        <div>
            <!-- btn btn-default 设置按钮的样式-->
            <button type="submit" class="btn btn-default">登陆</button>
        </div>
    </form>
</div>

</body>
</html>